<template>
  <div>
    <!--编辑Dialog-->
    <el-dialog :visible.sync="editDialog" :fullscreen="isFullScreen" :modal="false">
      <!-- 标题区域slot  -->
      <template #title>
        <div class="avue-crud__dialog__header">
          <span class="el-dialog__title">新 增</span>
          <i class="el-icon-full-screen avue-crud__dialog__menu" @click="isFullScreen = !isFullScreen"></i>
        </div>
      </template>
      <el-form :model="postForm" ref="crudForm" label-width="120px">
        <el-form-item v-for="(item, index) in editForm" :key="index" :label="item.title" :prop="item.field"
          :rules="item.rules">
          <el-input v-if="item.widget === 'input'" v-model="postForm[item.field]" :type="item.type"></el-input>
          <el-input v-if="item.widget === 'textarea'" v-model="postForm[item.field]" type="textarea" :rows="5"></el-input>

          <el-select v-if="item.widget === 'select'" v-model="postForm[item.field]" :multiple="item.multiple"
            :placeholder="'请选择' + item.title">
            <el-option v-for="(v, i) in item.options" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
          <div v-if="item.widget === 'radio'">
            <el-radio v-model="postForm[item.field]" v-if="item.options" v-for="(v, i) in item.options" :key="i"
              :label="v.value">{{ v.label }}</el-radio>
          </div>
          <el-cascader v-if="item.widget === 'cascader'"
            :props="{ expandTrigger: 'hover', multiple: item.multiple === undefined ? true : item.multiple }"
            v-model="postForm[item.field]" :options="item.options"></el-cascader>
          <el-switch v-if="item.widget === 'switch'" v-model="postForm[item.field]" :active-value="1"
            :inactive-value="0"></el-switch>
          <el-date-picker v-if="item.widget === 'date'" v-model="postForm[item.field]" type="date"
            value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          <el-date-picker v-if="item.widget === 'datetime'" v-model="postForm[item.field]" type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" default-time="12:00:00"></el-date-picker>

          <el-time-picker v-if="item.widget === 'time'" :picker-options="{ selectableRange: '' }" value-format="HH:mm"
            v-model="postForm[item.field]" placeholder="选择时间">
          </el-time-picker>

          <el-input v-if="item.widget === 'upload'" v-model="postForm[item.field]">
            <!--<template slot="prepend">-->
            <!--<img :src="postForm[item.field]" alt="">-->
            <!--</template>-->
            <uploader slot="append" :params="item.field" @successCBK="imageSuccessCBK"></uploader>
          </el-input>

          <el-transfer v-if="item.widget === 'transfer'" v-model="postForm[item.field]"
            :data="item.options"></el-transfer>

        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </template>

    </el-dialog>
  </div>
</template>

<script>
import Uploader from "@/components/Uploader";

export default {
  name: "EditForm",
  components: {
    Uploader,
  },
  props: {
    editForm: {
      type: Array | Object,
      default: () => [],
    },
    postForm: Object,
  },
  data() {
    return {
      isFullScreen: false,
      editDialog: false,
    };
  },
  methods: {
    onSave() {
      console.log(this.postForm)
      this.$refs['crudForm'].validate((valid) => {
        if (valid) {
          this.$emit("onSave", this.postForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    imageSuccessCBK(k, url) {
      this.postForm[k] = url;
    },
  },
};
</script>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  .avue-crud__dialog__menu {
    padding-right: 20px;
  }
}
</style>